<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #box{
        width: 500px;
        height: 100px;
    }

    #int {
        width: 200px;
        height: 40px;
    }

    #but1,
    #but2 {
        width: 100px;
        height: 40px;
    }
</style>

<body>
    <!-- <div id="box"></div> -->
        <input type="text" id="int" value="">
        <button id="but1">开始</button>
        <button id="but2">关闭</button>
    

    <script>

        

        but1.onclick = function (){
            
            setInterval(fn,1000)
        function fn(time1){

            // var lis = document.getElementById('int').value = int

            var time = new Date()
            var n = time.getFullYear()  // 年
            var y = time.getMonth() + 1 // 月
            var r = time.getDate()      // 日
            // var z = time.getDay()       // 星期

            

            var s = time.getHours()     // 点
            var f = time.getMinutes()   // 分
            var m = time.getSeconds()   // 秒
            var hm = time.getMilliseconds()
            // var arr = ['上午','中午','傍晚','深夜']
            var sum = ''
            if(s == 0){
                sum += '凌晨'
            }else if (s == 1) {
                sum += '凌晨'
            }else if (s == 2) {
                sum += '午夜'
            }else if (s == 3) {
                sum += '午夜'
            }else if (s == 4) {
                sum += '午夜'
            }else if (s == 5) {
                sum += '早晨'
            }else if (s == 6) {
                sum += '早晨'
            }else if (s == 7) {
                sum += '早晨'
            }else if (s == 8) {
                sum += '上午'
            }else if (s == 9) {
                sum += '上午'
            }else if (s == 10) {
                sum += '上午'
            }else if (s == 11) {
                sum += '中午'
            }else if (s == 12) {
                sum += '中午'
            }else if (s == 13) {
                sum += '下午'
            }else if (s == 14) {
                sum += '下午'
            }else if (s == 15) {
                sum += '下午'
            }else if (s == 16) {
                sum += '下午'
            }else if (s == 17) {
                sum += '下午'
            }else if (s == 18) {
                sum += '下午'
            }else if (s == 19) {
                sum += '傍晚'
            }else if (s == 20) {
                sum += '傍晚'
            }else if (s == 21) {
                sum += '晚上'
            }else if (s == 22) {
                sum += '晚上'
            }else if (s == 23) {
                sum += '晚上'
            }

            int.value = `${bu(n)}/${bu(y)}/${bu(r)} ${sum} ${s}点${bu(f)}分${bu(m)}秒`
       
         function bu(num){
            return num < 10 ? '0' + num : num
        }
        document.getElementById('but2').onclick = function () {
            clearInterval(time1)
        }
        }
       
        
        }
        





        // but1.onclick = function () {
        //     var sum = Date.now()
        //     var num = new Date(2022,4,17)*1
        //     cha = num - sum

        //     var t = 24 * 60 * 60 * 1000
        //     var h = 60 * 60 * 60
        //     var m = 60 * 1000

        //     var tt = Math.floor(cha / t)
        //     var hh = Math.floor(cha % t / h)
        //     var mm = Math.floor(cha % h / m)
        //     var ms = Math.floor(cha % m /1000)
        //     box.innerHTML = `${bu0(tt)}点${bu0(hh)}分${bu0(mm)}秒`
        // }
        // function bu0(time){
        //     return time < 10 ? '0' + time : time
        // }
        
        // var time = null
        // time = setInterval(fn,1000)
        // fn()

    </script>
</body>

</html>